@import "../runo/runo.scss";

@import "icons/fontello.scss";
@import "fonts/open-sans.scss";
@import "keyframes.scss";

/* TODO move common mixins to base theme */
@import "mixins.scss";

/* TODO move new loading indicator to base when it's ready */
@import "loading-indicator.scss";

@import "common.scss";

/* TODO move new notification theme to base as the default when they are ready */
@import "components/window.scss";
@import "components/notification.scss";
@import "components/label.scss";
/*
@import "components/button.scss";
@import "components/textfield.scss";
@import "components/combobox.scss";
@import "components/tabsheet.scss";
@import "components/label.scss";
@import "components/table.scss";


@import "views/schedule.scss";
@import "views/sales.scss";
@import "views/reports.scss";
@import "views/transactions.scss";
*/

@mixin dashboard {
	
	@include runo;
	
	@include dashboard-loading-indicator;
	@include dashboard-common;
	

	.v-view {
		overflow: hidden;
	}
	
	&.v-app {
		background: #353637;
	}
	
	&.v-app[id*="overlays"] {
		height: 0;
	}
	
	
	.login-bg {
		content: "";
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
		background: #353637;
		
		/* TODO mixin */
		background: -moz-radial-gradient(center, ellipse cover, #4c4d4e 0%, #303131 100%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4c4d4e), color-stop(100%,#303131));
		background: -webkit-radial-gradient(center, ellipse cover, #4c4d4e 0%,#303131 100%);
		background: -o-radial-gradient(center, ellipse cover, #4c4d4e 0%,#303131 100%);
		background: -ms-radial-gradient(center, ellipse cover, #4c4d4e 0%,#303131 100%);
	/* 	background: radial-gradient(ellipse at center, #4c4d4e 0%,#303131 100%); */
	
		opacity: 0;
		
		/* TODO mixin */
		-webkit-transition: opacity 300ms linear;
		-moz-transition: opacity 300ms linear;
		transition: opacity 300ms linear;
		
		@include fade-in;
	}
	
	.main-view,
	.login-layout {
		position: relative;
		z-index: 2;
	}
	
	div.login-panel {
		@include move-up-100;
	}
	
	.login-panel {
		background: #fff;
		@include border-radius(4px);
		@include box-shadow(0 4px 20px rgba(0,0,0,.5));
		padding: 1em 1em 2em;
	}
	
	.login-panel .labels,
	.login-panel .fields {
		display: block;
	}
	
	.login-panel .v-textfield {
		width: 150px;
	}
	
	.login-panel .h2 {
		padding: 0;
		font-size: 20px;
		color: #c4cacf;
		letter-spacing: -0.05em;
	}
	
	.login-panel .error {
		font-size: 13px;
		height: 20px;
		padding-left: 14px;
	}
	
	
	.v-animate-reveal {
		@include reveal;
	}
	
	.v-animate-hide {
		@include hide;
	}
	
	
	.login .login-bg {
		opacity: 1;
	}
	
	
	.sidebar {
		background: #7798c8 url(img/sidebar-gradient.png) repeat-y top right;
		@include move-right;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	.sidebar .branding {
		border-bottom: 1px solid #353637;
		position: relative;
		-webkit-font-smoothing: antialiased;
	}
	
	.sidebar .branding .v-label {
		position: relative;
		z-index: 2;
		
		white-space: normal;
		font-size: 16px;
		line-height: 1.1;
		color: #fff;
		text-shadow: 0 2px 2px rgba(0,0,0,.5);
		
		/* WTH? Why is inline-block forced as an inline style? */
		display: block !important;
		padding: .8em .8em 1.2em;
		
		//@include box-shadow(inset 0 0 5px 2px rgba(0,0,0,.5));
	}
	
	.sidebar .branding .v-label span {
		font-size: 13px;
		color: #d0d1d3;
		display: block;
	}
	
	.sidebar .branding .v-image {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	.sidebar .menu {
		overflow: auto;
		height: 100%;
	}
	
	.sidebar .menu .v-ddwrapper {
		padding: 2px;
	}
	
	.sidebar .menu .v-ddwrapper .v-nativebutton {
		margin: -2px -2px;
	}
	
	.sidebar .menu .v-ddwrapper-over {
		padding: 0;
		border: 2px solid #2d90f3;
		background: transparent;
		@include border-radius(4px);
	}
	
	.sidebar .menu .v-nativebutton {
		/* TODO mixin */
		-webkit-appearance: none;
		
		display: block;
		padding: 10px 14px 10px;
		width: 100%;
		border: none;
		margin: 0;
		position: relative;
		
		border-top: 1px solid #4b4c4d;
		border-top-color: rgba(255,255,255,.05);
		
		border-bottom: 1px solid #353637;
		border-bottom-color: rgba(0,0,0,.18);
		
		background: transparent;
		
		color: #888a8c;
		font-weight: normal;
		text-shadow: 0 1px 0 rgba(0,0,0,.5);
		text-align: center;
		
		/* TODO mixin */
		/* 		-webkit-transition: color ease-in-out 100ms, background-color linear 60ms; */
		/* 		-moz-transition: color ease-in-out 100ms, background-color linear 60ms; */
		/* 		transition: color ease-in-out 100ms, background-color linear 60ms; */
	}
	
	.sidebar .menu:after {
		content: "";
		display: block;
		border-top: 1px solid #4b4c4d;
		border-top-color: rgba(255,255,255,.05);
		height: 0;
	}
	
	.sidebar .menu .v-nativebutton-caption {
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		display: block;
		margin: .2em 0 0 0;
	}
	
	.sidebar .menu .v-nativebutton:focus {
		outline: none;
	}
	
	.sidebar .menu .v-nativebutton:hover,
	.sidebar .menu .v-nativebutton:focus {
		color: #e1e1e1;
	}
	
	.sidebar .menu .v-nativebutton:before {
		font-size: 24px;
		line-height: 1;
		margin: 0;
	}
	
	.v-webkit & .menu .v-nativebutton:before {
		/* TODO mixin */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(100%,#d3d3d3));
		background: -webkit-linear-gradient(top, #fff 0%,#777 100%);
	/* 	background: linear-gradient(to bottom, #e8e8e8 0%,#d3d3d3 100%); */
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow: 0 1px 1px rgba(0,0,0,.2);
		opacity: .5;
		
		/* TODO mixin */
		-webkit-transition: opacity ease-in-out 200ms;
		-moz-transition: opacity ease-in-out 200ms;
		-ms-transition: opacity ease-in-out 200ms;
		-o-transition: opacity ease-in-out 200ms;
		transition: opacity ease-in-out 200ms;
	}
	
	.v-webkit & .menu .v-nativebutton:hover:before,
	.v-webkit & .menu .v-nativebutton:focus:before {
		opacity: 1;
	}
	
	.sidebar .menu .v-nativebutton:active {
		background: rgba(0,0,0,.1);
	}
	
	.sidebar .menu .v-nativebutton.selected {
		color: #e1e1e1;
		text-shadow: 0 2px 2px rgba(0,0,0,.5);
		
		border-top-color: #262729;
		border-bottom-color: #2b2c2e;
		
		background: #333537;
		
		/* TODO mixin */
		background: -moz-linear-gradient(top, #2d2f30 0%, #333537 10%, #333537 90%, #2d2f30 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2f30), color-stop(10%,#333537), color-stop(90%,#333537), color-stop(100%,#2d2f30));
		background: -webkit-linear-gradient(top, #2d2f30 0%,#333537 10%,#333537 90%,#2d2f30 100%);
		background: -o-linear-gradient(top, #2d2f30 0%,#333537 10%,#333537 90%,#2d2f30 100%);
		background: -ms-linear-gradient(top, #2d2f30 0%,#333537 10%,#333537 90%,#2d2f30 100%);
	/* 	background: linear-gradient(to bottom, #2d2f30 0%,#333537 10%,#333537 90%,#2d2f30 100%); */
	
		-webkit-transition: none;
	}
	
	.v-webkit & .menu .v-nativebutton.selected:before {
		text-shadow: none;
		opacity: 1;
	}
	
	.badge,
	.notifications .v-button-caption {
		display: inline-block;
		font-size: 11px;
		line-height: 1;
		color: #fff;
		text-shadow: 0 1px 1px rgba(0,0,0,.3);
		padding: .1em .4em .2em;
		
		background: #f16433;
		
		/* TODO mixin */
		background: -moz-linear-gradient(top, #faa290 0%, #f77b62 14%, #ec3120 87%, #ce2314 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faa290), color-stop(14%,#f77b62), color-stop(87%,#ec3120), color-stop(100%,#ce2314));
		background: -webkit-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
		background: -o-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
		background: -ms-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
		/* Sass compiler chokes on this */
		/* background: linear-gradient(to bottom, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%); */
		
		@include border-radius(2px);
		
		@include box-shadow(0 1px 1px rgba(0,0,0,.3));
	}
	
	.menu .v-nativebutton .badge {
		position: absolute;
		top: 6px;
		right: 8px;
	}
	
	
	
	
	.sidebar .user {
		display: block;
		
		border-top: 1px solid #303132;
		background: #3b3c3d;
		background-color: rgba(0,0,0,.1);
		
		color: #898c8e;
		text-shadow: 0 1px 1px rgba(0,0,0,.5);
		
		@include box-shadow(inset 0 1px 0 rgba(255,255,255,.08));
	}
	
	.sidebar .user > .v-slot {
		display: inline-block;
		width: 50%;
	}
	
	.sidebar .user > .v-slot:first-child {
		width: 34px;
	}
	
	.sidebar .user .v-image {
		width: 34px;
		height: 34px;
		border-right: 1px solid #313132;
	}
	
	.sidebar .user .v-label {
		white-space: normal;
		font-size: 12px;
		line-height: 14px;
		font-weight: 600;
		max-width: 50px;
		overflow: visible;
		padding: 2px 8px;
		height: 34px;
		color: inherit;
		-webkit-font-smoothing: antialiased;
	}
	
	.sidebar .user .v-nativebutton,
	.sidebar .user .v-menubar {
		/* TODO mixin */
		-webkit-appearance: none;
		
		border: none;
		border-top: 0px solid #303132;
		background: transparent;
		width: 100%;
		padding: 0;
		
		color: inherit;
	}
	
	.sidebar .user .v-nativebutton:focus {
		outline: none;
	}
	
	.sidebar .user .v-nativebutton:hover,
	.sidebar .user .v-menubar-menuitem:hover {
		color: #e1e1e1;
	}
	
	.sidebar .user .v-nativebutton-caption {
		display: none;
	}
	
	.sidebar .user .v-nativebutton:before,
	.sidebar .user .v-menubar-menuitem:before {
		font-size: 16px;
		margin: 0;
		display: block;
		border-top: 1px solid #434445;
		padding: .3em 0 .4em;
	}
	
	.sidebar .user .v-menubar-menuitem {
		border-right: 1px solid #434445;
		display: block !important;
		cursor: pointer;
		width:100%;
		height:100%;
	}
	
	.sidebar .user .icon-cancel {
		border-left: 1px solid #303132;
	}
	
	
	.layout-panel {
		background: #fff;
		@include border-radius(4px);
		/* TODO make this work in the Sass compiler */
		/* 	@include box-shadow(0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07)); */
		-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07);
		-moz-box-shadow: 0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07);
		box-shadow: 0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07);
	}
	
	.v-ie8 & .layout-panel {
		border: 1px solid #d8d9d9;
	}
	
	
	.main-view {
		@include fade-in;
	}
	
	.view-content {
		overflow: visible;
	}
	
	.main-view {
		background: #fff;
	}
	
	
	
	
	.help-overlay {
	    @include dashboard-window;
		@include border-radius(2px);
		@include box-shadow(0 3px 10px rgba(0,0,0,.5));
		padding: 15px 20px;
		background: #464646;
		background-color: rgba(40,40,40,.85);
		text-shadow: 0 1px 1px rgba(0,0,0,.5);
		color: #a6a9aa;
		font: $font;
		font-size: 12px;
		
		@include fade-in;
		
		opacity: 0;
		@include animation-duration(1500ms);
		@include animation-delay(2000ms);
		@include animation-fill-mode(forwards);
	
		max-width: 50em;

		.v-window-outerheader {
			padding: 0;
			color: #fff;
			font-size: 14px;
			line-height: 1;
		}
	
		.v-window-header {
			font-weight: normal;
			overflow: visible;
		}
	
		.v-window-footer {
			height: 0;
		}
	
		.v-window-closebox {
			
		}
	
		.v-label p {
			margin: 7px 0 0 0;
		}
	
		a {
			color: #a6a9aa;
			text-decoration: underline;
		}
		
	}
	
    .help-overlay-content {
    	@include dashboard-label;
	}
	
	
	.help-overlay.login {
		top: auto !important;
		bottom: 20px;
	}
	
	
	
	.dashboard-view .v-horizontallayout {
		padding: 0 20px 20px;
	}
	
	.dashboard-view .v-spacing {
		width: 20px;
		height: 20px;
	}
	
	.dashboard-view .toolbar .v-spacing {
		width: 10px;
	}
	
	
	.dashboard-view .v-csslayout {
		padding: 50px 20px 0;
		overflow: auto;
		position: relative;
	}
	
	.dashboard-view .v-caption {
		font-weight: 600;
		font-size: 13px;
		color: #349aff;
		text-transform: uppercase;
		padding: 0 20px;
		line-height: 38px;
		border-bottom: 1px solid #eee;
		
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	
	.dashboard-view .configure {
		position: absolute;
		z-index: 1;
		top: 9px;
		right: 5px;
	}
	
	.dashboard-view .notes {
		padding: 40px 0 0;
	}
	
	.dashboard-view .notes .v-caption {
		color: #fff;
		text-shadow: 0 1px 1px #000;
		background: #5d6167;
		background: -moz-linear-gradient(top, #5d6167 0%, #393939 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d6167), color-stop(100%,#393939));
		background: -webkit-linear-gradient(top, #5d6167 0%,#393939 100%);
		background: -o-linear-gradient(top, #5d6167 0%,#393939 100%);
		background: -ms-linear-gradient(top, #5d6167 0%,#393939 100%);
		/* background: linear-gradient(to bottom, #5d6167 0%,#393939 100%); */
	}
	
	.dashboard-view .notes .v-textarea {
		border: none;
		padding: 20px 20px 0;
		line-height: 20px;
		background: #fffdf2 url(img/notes-bg.png) repeat;
		color: #545145;
	}
	
	.dashboard-view .notes .v-textarea:focus {
		outline: none;
	}
	
	.dashboard-view .notes .configure {
		color: #ddd;
		text-shadow: 0 1px 1px #000;
	}
	
	.dashboard-view .toolbar {
		padding: 20px;
		text-shadow: 0 1px 1px rgba(255,255,255,.5);
		background: transparent;
	}
	
	.dashboard-view .toolbar .v-button {
		position: relative;
		font-size: 16px;
	}
	
	.dashboard-view .toolbar .notifications.unread .v-button-caption {
		display: block;
		position: absolute;
		top: 2px;
		right: 3px;
	}
	
	.dashboard-view .h1 {
		padding-right: 1em;
	}
	
	.dashboard-view {
		background: #dfe0e1;
		
		/* TODO mixin */
		background: -moz-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d9da), color-stop(10%,#e6e7e8), color-stop(100%,#e0e1e2));
		background: -webkit-linear-gradient(top, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%);
		background: -o-linear-gradient(top, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%);
		background: -ms-linear-gradient(top, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%);
	/* 	background: linear-gradient(to bottom, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%); */
	}
	
	.notifications.v-window {
		margin-top: 45px !important;
		margin-left: -193px !important;
		font-size: 13px;
	}
	
	.notifications.v-window .v-widget {
		font-size: 13px;
	}
	
	.notifications.v-window::before {
		content: "";
		position: absolute;
		top: -14px;
		right: 80px;
		border: 7px solid #fff;
		width: 0;
		height: 0;
		border-top-color: transparent;
		border-left-color: transparent;
		border-right-color: transparent;
		margin-left: -7px;
	}
	
	.notifications.v-window .v-window-outerheader {
		font-size: 16px;
		color: #f16433;
		line-height: 25px;
		padding-left: 14px;
	}
	
	.notifications.v-window .v-label span {
		font-size: 12px;
		color: #979699;
	}
	
	.notifications.v-window .v-label hr {
		height: 0;
		border: none;
		border-top: 1px solid #ddd;
		margin: 0 -12px 12px;
	}
	
	.v-formlayout-captioncell {
		vertical-align: top;
	}
	
	.edit-dashboard .v-formlayout {
		padding: 10px 8px;
		
		.v-formlayout-captioncell {
			vertical-align: middle;
		}
	}

}